<template>
  <div>
    <div class="md:flex">
      <div class="enter-y md:w-1/2">
        <!-- <Search class="md:mb-2" /> -->
        <SiteAnalysis class="enter-y mt-2" :phone="phone" />
        <div class="mt-2">
          <NowInfo class="w-full" :phone="phone" />
          <Report class="w-full mt-2" :peopleInfo="userInfo" />
          <MyReserve class="w-full mt-2" />
        </div>
      </div>
      <div class="enter-y md:w-1/2">
        <!-- 右上角基本信息 -->
        <BasicInfo
          class="w-full !md:mx-4 !md:my-0 h-2/8"
          :checkDetailedInfo="checkDetailedInfo"
          :check3DInfo="check3DInfo"
          :phone="phone"
          :userId="userId"
        />
        <!-- 诊断建议 -->
        <HealthEvent_1 class="w-full !my-4 !md:mx-4 md:h-3/7" :phone="phone" />
        <!-- 医保 -->
        <!-- <MedicalInsurance class="w-full !md:mx-4 h-2/8" :propleInfo="userInfo" /> -->
      </div>
    </div>
  </div>
  <!-- 档案信息 弹窗 -->
  <div class="popup" v-show="isDetailedInfoVisible">
    <div class="popup-inner">
      <button className="popup-close-button" @click="() => (isDetailedInfoVisible = false)"
        ><CloseOutlined
      /></button>
      <div class="flex flex-row h-full">
        <div class="flex-none w-90 h-full p-4">
          <div class="h-full flex justify-between flex-col">
            <div>
              <Avatar :size="{ md: 45 }" style="height: 45px; width: 45px">
                <template #icon>
                  <img src="/resource/img/123.jpg" />
                </template>
              </Avatar>
              <div class="flex">
                <div class="flex">
                  <div class="mr-2 item_title">性别</div>
                  <div class="mr-2 content-title">{{ userInfo.sex }}</div>
                </div>
                <div class="flex">
                  <div class="mr-2 item_title">年龄</div>
                  <div class="mr-2 content-title">{{ userInfo.age || '---' }}</div>
                </div>
              </div>
              <div class="hr-style"></div>
              <div class="second-line flex md:mt-2">
                <div class="flex">
                  <div class="mr-2 item_title">身高</div>
                  <div class="mr-2 content-title">{{ userInfo.height || '---' }}cm</div>
                </div>
                <div class="flex">
                  <div class="mr-2 item_title">体重</div>
                  <div class="mr-2 content-title">{{ userInfo.weight || '---' }}kg</div>
                </div>
                <div class="flex">
                  <div class="mr-2 item_title">BMI</div>
                  <div class="mr-2 content-title">{{ bmidata }}</div>
                </div>
              </div>
              <div class="hr-style"></div>
              <div class="flex md:mt-2">
                <div class="item_title">病症</div>
                <div class="ml-2 mr-2 content-title">{{ userInfo.illness || '---' }}</div>
              </div>
            </div>
            <Divider />
            <!-- <div id="wordcloud"></div>
            <div class="flex-none flex justify-between">
              <Button type="primary">添加</Button>
              <Button type="primary">修改</Button>
            </div> -->
            <div>
              <div id="wordcloud"></div>

              <!-- <div class="flex-none flex justify-between">
                <Button type="primary" @click="addItem">添加</Button>
                <Button type="primary" @click="editItem">修改</Button>
              </div> -->

              <!-- 添加/修改模态框 -->
              <div v-if="showModal" class="modal">
                <div class="modal-content">
                  <input v-model="newItem" placeholder="输入词云内容" />
                  <button class="button-1" @click="submitItem">{{
                    isEditMode ? '修改' : '添加'
                  }}</button>
                  <button class="button-1" @click="cancelEdit">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Divider type="vertical" style="height: 100%" />
        <div class="flex-auto p-3 h-full">
          <Tabs v-model:activeKey="tabKey">
            <TabPane key="1" tab="基础档案" class="h-full">
              <div class="flex flex-row justify-around h-full items-center">
                <Card class="h-6/7 w-3/7">
                  <div>
                    <label>身高：</label>
                    <span>{{ userInfo.height }}</span>
                  </div>
                  <div>
                    <label>体重：</label>
                    <span>{{ userInfo.weight }}</span>
                  </div>
                  <div>
                    <label>地址：</label>
                    <span>{{ userInfo.address }}</span>
                  </div>
                  <div>
                    <label>居住地区：</label>
                    <span>{{ userInfo.residentialArea }}</span>
                  </div>
                  <div>
                    <label>婚姻状态：</label>
                    <span>{{ userInfo.maritalStatus }}</span>
                  </div>
                  <div>
                    <label>身份证号：</label>
                    <span>{{ userInfo.identificationNumber }}</span>
                  </div>
                  <div>
                    <label>民族：</label>
                    <span>{{ userInfo.ethnic }}</span>
                  </div>
                  <div>
                    <label>籍贯：</label>
                    <span>{{ userInfo.origin }}</span>
                  </div>
                  <!-- <div>
                    <label>职业：</label>
                    <span>{{ userInfo.occupation }}</span>
                  </div>
                  <div>
                    <label>文化程度：</label>
                    <span>{{ userInfo.education }}</span>
                  </div>
                  <div>
                    <label>医保情况：</label>
                    <span>{{ userInfo.healthInsurance }}</span>
                  </div>
                  <div>
                    <label>社保卡号：</label>
                    <span>{{ userInfo.shebaoKahao }}</span>
                  </div>
                  <div>
                    <label>社保消费：</label>
                    <span>{{ userInfo.shebaoXiaofei }}</span>
                  </div>
                  <div>
                    <label>社保结算：</label>
                    <span>{{ userInfo.shebaoJiesuan }}</span>
                  </div> -->
                </Card>
                <!-- <Card>
                  <div>
                    <label>所患疾病：</label>
                    <span>{{ userInfo.illness }}</span>
                  </div>
                  <div>
                    <label>疾病史：</label>
                    <span>{{ userInfo.jibing }}</span>
                  </div>
                  <div>
                    <label>手术史：</label>
                    <span>{{ userInfo.shoushu }}</span>
                  </div>
                  <div>
                    <label>遗传病史：</label>
                    <span>{{ userInfo.yichuan }}</span>
                  </div>
                  <div>
                    <label>饮酒情况：</label>
                    <span>{{ userInfo.alcoholConsumption }}</span>
                  </div>
                  <div>
                    <label>吸烟情况：</label>
                    <span>{{ userInfo.smokingSituation }}</span>
                  </div>
                  <div>
                    <label>运动情况：</label>
                    <span>{{ userInfo.sportsSituation }}</span>
                  </div>
                  <div>
                    <label>运动方式：</label>
                    <span>{{ userInfo.modeOfMotion }}</span>
                  </div>
                  <div>
                    <label>生活以静坐为主：</label>
                    <span>{{ userInfo.meditationSituation }}</span>
                  </div>
                </Card> -->
              </div>
            </TabPane>
            <TabPane key="2" tab="就医记录" force-render>
              <Table :dataSource="dsMedicalRecord" :columns="columnsMedicalRecord" />
            </TabPane>
            <TabPane key="3" tab="日常体征">
              <Table :dataSource="dsDailySign" :columns="columnsDailySign" />
            </TabPane>
            <TabPane key="4" tab="体检记录">
              <Table :dataSource="dsPhysicalExamination" :columns="columnsPhysicalExamination" />
            </TabPane>
            <TabPane key="5" tab="养老服务">
              <Table
                :dataSource="dsOlderCaringService"
                :columns="columnsOlderCaringService"
                :pagination="{ pageSize: 9 }"
              />
            </TabPane>
            <TabPane key="6" tab="服务推荐">
              <Table
                :dataSource="dsServiceRecommendation"
                :columns="columnsServiceRecommendations"
              />
            </TabPane>
            <TabPane key="7" tab="健康建议">
              <Table :dataSource="dsHealthAdvise" :columns="columnsHealthAdvise" />
            </TabPane>
            <TabPane key="8" tab="健康评估">
              <Table :dataSource="dsHealthEvaluation" :columns="columnsHealthEvaluation" />
            </TabPane>
            <TabPane key="9" tab="平台绑定">
              <!-- <Table :dataSource="dsHealthEvaluation" :columns="columnsHealthEvaluation" /> -->
            </TabPane>
          </Tabs>
          <div style="margin-top: 16px; text-align: right">
            <Button type="primary" @click="openUpdateModal">获取结论</Button>
          </div>
          <!-- <div style="margin-top: 16px; text-align: right">
            <Button type="primary" @click="openInfoModal">更新个人信息</Button>
          </div> -->
          <!-- 更新弹窗 -->
          <div v-if="showUpdateModal" class="modal_1">
            <div class="modal-content_1" style="text-align: center">
              <!-- <spin v-if="loading" size="large" tip="加载中..." /> -->
              <Icon icon="ant-design:exclamation-circle-outlined" class="ml-2" />
              <span style="margin-left: 8px">您将授权我们获取以下平台的数据</span>
              <div
                style="display: flex; align-items: center; justify-content: center; margin: 16px 0"
              >
                <span style="font-size: 18px; margin-right: 16px">请选择平台：</span>
                <select
                  v-model="selectedPlatform"
                  style="width: 320px; font-size: 16px; margin-right: 16px"
                >
                  <option value="zhongyang">众阳</option>
                  <option value="yileju">颐乐居</option>
                  <!-- <option value="zhongshan">中山</option> -->
                  <option value="hayida">哈医大</option>
                </select>
                <button class="button-1" @click="handleConfirmClick" :disabled="isConfirming"
                  >拉取</button
                >
              </div>
              <!-- 新增：拉取结果展示 -->
              <textarea
                v-model="pulledDataText"
                readonly
                rows="6"
                style="width: 90%; margin-top: 16px; resize: vertical"
                placeholder="结果将在此显示"
              ></textarea>
              <button class="button-1" @click="showUpdateModal = false">确定</button>
            </div>
          </div>

          <div v-if="showInfoModal" class="modal_1">
            <div class="modal-content_1" style="text-align: center">
              <spin v-if="loading" size="large" tip="加载中..." />
              <Icon icon="ant-design:exclamation-circle-outlined" class="ml-2" />
              <span style="margin-left: 8px">您将授权我们获取以下平台的数据</span>
              <div
                style="display: flex; align-items: center; justify-content: center; margin: 16px 0"
              >
                <span style="font-size: 18px; margin-right: 16px">请选择平台：</span>
                <select
                  v-model="selectedPlatform"
                  style="width: 320px; font-size: 16px; margin-right: 16px"
                >
                  <option value="zhongyang">众阳</option>
                  <option value="yileju">颐乐居</option>
                  <!-- <option value="zhongshan">中山</option> -->
                  <option value="hayida">哈医大</option>
                </select>
                <button class="button-1" @click="handleConfirmClick" :disabled="isConfirming"
                  >拉取</button
                >
              </div>
              <!-- 新增：拉取结果展示 -->
              <textarea
                v-model="pulledDataText"
                readonly
                rows="6"
                style="width: 90%; margin-top: 16px; resize: vertical"
                placeholder="结果将在此显示"
              ></textarea>
              <button class="button-1" @click="showInfoModal = false">确定</button>
            </div>
          </div>
        </div>
      </div>
      <!-- <div CollapseTransition="popup-button-row">
        <button class="popup-cancel-button" @click="() => (isDetailedInfoVisible = false)">Cancel</button>
      </div> -->
    </div>
  </div>
  <!-- 3D信息框 -->
  <div class="popup_3d" v-show="is3DInfoVisible">
    <div class="popup-inner_3d">
      <button className="popup-close-button_3d" @click="() => (is3DInfoVisible = false)"
        ><CloseOutlined
      /></button>
      <div class="flex flex-col h-full">
        <div
          class="flex-1 flex justify-center items-center bg-cover bg-center"
          style="background-image: url('/resource/health/img/头.png')"
        >
          <p class="text-white text-2xl font-bold">患者信息</p>
        </div>
        <HealthStatus :userInfo="userInfo" :phone="phone" />
        <!-- <Time /> -->
      </div>
      <!-- <div class="flex flex-row h-full">
        <HealthStatus class="w-full" />
      </div> -->
      <!-- <div CollapseTransition="popup-button-row">
        <button class="popup-cancel-button" @click="() => (isDetailedInfoVisible = false)">Cancel</button>
      </div> -->
    </div>
  </div>

  <!-- 全屏加载蒙层 -->
  <div v-if="showLoading" class="loading-overlay">
    <div class="loading-content">
      <Spin size="large" tip="正在获取数据，请稍后..." />
    </div>
  </div>
</template>
<script lang="ts" setup name="Analysis">
  import NowInfo from './components/NowInfo.vue';
  import Report from './components/Report2.vue';
  import Search from './components/Search.vue';
  import MyReserve from './components/MyReserve.vue';
  import GrowCard from './components/GrowCard.vue';
  import SiteAnalysis from './components/SiteAnalysis.vue';
  import VisitSource from './components/VisitSource.vue';
  import VisitRadar from './components/VisitRadar.vue';
  import SalesProductPie from './components/SalesProductPie.vue';
  import BasicInfo from './components/BasicInfo.vue';
  import HealthEvent_1 from './components/HealthEvent_1.vue';
  import MedicalInsurance from './components/MedicalInsurance.vue';
  import { ref, onMounted, computed } from 'vue';
  import { getBaseInfo, getMappingId } from '/@/api/sys/desktopApi';
  import { labelUpdate, insertAdvices } from '/@/api/sys/user';
  import { useUserStore } from '/@/store/modules/user';
  import { CollapseTransition } from '/@/components/Transition';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { Card, Divider, Tabs, TabPane, Avatar, Button, Table, Spin } from 'ant-design-vue';
  import * as d3 from 'd3';
  import * as cloud from 'd3-cloud';
  import HealthStatus from './components/HealthStatus.vue';
  import { Icon } from '/@/components/Icon';
  import axios from 'axios';
  import { co } from '@fullcalendar/core/internal-common';
  // import tijian from './components/tijian.vue';
  const userStore = useUserStore();
  const showUpdateModal = ref(false);
  const showInfoModal = ref(false);
  // 新增状态变量
  const isConfirming = ref(false);
  const showLoading = ref(false);
  // import { select } from 'ant-design-vue';

  let selectedPlatform = ref('yileju');
  console.log(userStore.getUserInfo);
  // 使用 ref 创建一个响应式引用
  const userInfo = ref({});
  // const phone = userStore?.patientPhone ?? '13021646422';
  const phone = userStore.getUserInfo.loginCode;
  const userId = userStore.getUserInfo.userCode;

  console.log('111111111111', userStore.getUserInfo);
  console.log('222222222222', phone);
  // const phone = '13021646422';
  const words = ref([]);

  //   const words = ref([
  //   { text: '中年', size: 24 },
  //   { text: '高血压222', size: 24 },
  //   { text: '高血糖', size: 24 },
  //   { text: '高血脂', size: 24 },
  // ]);
  const showModal = ref(false);
  const newItem = ref('');
  const isEditMode = ref(false);
  const mappingId = ref({});
  const currentEditIndex = ref(0); // 当前编辑项的索引
  onMounted(async () => {
    console.log(userStore);
    try {
      // 调用异步函数并等待结果
      const data = await getBaseInfo({
        phone: userId,
      });
      console.log(data);
      // 更新响应式引用
      userInfo.value = data;
      // 处理从 getBaseInfo 返回的数据
      // console.log(data);
      // const layout = d3.layout.cloud()
      console.log('userInfo.biaoQian1111', userInfo.value.biaoQian);
      userInfo.value.biaoQian.split('|').forEach((item) => {
        words.value.push({ text: item, size: 24 });
      });
      console.log('words.value', words.value);
      generateWordCloud(words.value);
      mappingId.value = await getMappingId({
        phone: userId,
      });
    } catch (error) {
      console.error(error);
    }
  });
  const platformMap: Record<string, string> = {
    zhongyang: 'platformAId',
    yileju: 'platformBId',
    zhongshan: 'platformCId',
    hayida: 'platformDId',
  };
  const platformTask: Record<string, string> = {
    zhongyang: 'summarize_zy_service_records',
    yileju: 'summarize_ylj_order_records',
    zhongshan: 'platformCId',
    hayida: 'summarize_hyd_service_records',
  };
  const pulledDataText = ref(''); // 新增
  const loading = ref(false); // 加载状态

  async function reloadData() {
    try {
      // 调用异步函数并等待结果
      const data = await getBaseInfo({
        phone: userId,
      });
      console.log(data);
      // 更新响应式引用
      userInfo.value = data;
      // 处理从 getBaseInfo 返回的数据
      // console.log(data);
      // const layout = d3.layout.cloud()
      console.log('userInfo.biaoQian1111', userInfo.value.biaoQian);
      userInfo.value.biaoQian.split('|').forEach((item) => {
        words.value.push({ text: item, size: 24 });
      });
      console.log('words.value', words.value);
      generateWordCloud(words.value);
      mappingId.value = await getMappingId({
        phone: userId,
      });
    } catch (error) {
      console.error(error);
    }
  }

  // 添加拉取数据功能
  // 新增按钮点击处理函数
  async function handleConfirmClick() {
    // 立即禁用按钮
    isConfirming.value = true;
    // 显示全屏加载蒙层
    showLoading.value = true;
    try {
      // 调用实际的拉取函数
      await handleConfirm();
    } finally {
      // 无论成功失败，都关闭加载蒙层和恢复按钮状态
      showLoading.value = false;
      isConfirming.value = false;
    }
  }

  async function handleConfirm() {
    // setDrawerProps({ confirmLoading: true }); // 如有抽屉加载可保留，否则可去掉
    loading.value = true; // 显示加载状态
    console.log('开始拉取数据...', loading.value);

    try {
      // 拉取数据
      const user_id = mappingId.value[platformMap[selectedPlatform.value]];
      const task_name = platformTask[selectedPlatform.value];
      // alert(id_1);
      if (!user_id) {
        alert('用户不在该平台');
        return;
      }
      const res = await axios.post(
        `https://hgdzhyypt.msuncloud.cn:20145/main/execute-task`,
        // { user_id: user_id, task_name: task_name },
        { user_id: user_id, task_name: task_name },
        {
          timeout: 100000,
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      console.log('API 响应:', res.data);
      // ...你的数据处理逻辑...
      const report = res.data.data || '';
      console.log('report:', report);

      // const report =
      //   '\n{\n    "basicinfo": "服务类别：照护者护理技能培训3次(27.3%)，生活照料4次(36.4%)，居家安全评估2次(18.2%)，健康评估2次(18.2%)。预约集中在5月和4月，上午时段较多。",\n    "trend": "近3个月，生活照料需求稳定；复购率高的是生活照料与照护者护理技能培训；新增了居家安全评估服务。",\n    "label": "需生活照料|关注健康评估|重视居家安全"\n}\n';
      // const jsonStr = report.replace(/^```json\n|\n```$/g, '');
      // const returnData = JSON.parse(report);

      const labels = report.label;
      const displaylabels =
        report.label && report.label.split('|').length > 0
          ? report.label.split('|').join('、')
          : '无';
      const trend = report.trend;
      const basicinfo = report.basicinfo;
      console.log('labels:', labels);
      console.log('trend:', trend);
      console.log('basicinfo:', basicinfo);
      const adviceList = [
        { phone: phone, biaoti: '基础分析', miaoshu: basicinfo },
        { phone: phone, biaoti: '趋势分析', miaoshu: trend },
      ];
      if (basicinfo !== '' && basicinfo !== '暂无服务记录') {
        await labelUpdate({
          patientPhone: userId,
          biaoQian: userInfo.value.biaoQian + '|' + labels,
        });

        await insertAdvices(adviceList);

        // const dataArr = res.data.data || [];
        // // 拼接 data
        // const dataStr = Array.isArray(dataArr)
        //   ? dataArr
        //       .map(
        //         (item) =>
        //           `- 机构：${item.agency_name}\n  服务类别：${item.service_category}\n  项目类型：${item.project_type}\n  服务内容：${item.service_content}\n  时间：${item.appointment_time}\n`,
        //       )
        //       .join('\n\n')
        //   : '';
        // 拼接最终 description
        // const desc = `${report}\n${dataStr}`;
        // 展示拉取到的报告，需要进行格式调整，拼接labels、trend、basicinfo
        pulledDataText.value = `【基础分析】\n${basicinfo}\n【趋势分析】\n${trend}\n【标签】\n${displaylabels}`;

        if (!words.value.some((w) => w.text === '日间照料')) {
          words.value.push({ text: '日间照料', size: 24 });
        }
        // 重新生成词云
        generateWordCloud(words.value);
        await reloadData();
        // showMessage('拉取成功');
      }
    } catch (e) {
      console.error('拉取失败:', e);
      // showMessage('拉取失败');
    } finally {
      loading.value = false; // 隐藏加载状态
      // setDrawerProps({ confirmLoading: false });
    }
  }

  // 打开更新弹窗
  async function openUpdateModal() {
    showUpdateModal.value = true;
    // mappingId.value = await getMappingId({
    //   phone: phone,
    // });
  }
  async function openInfoModal() {
    showInfoModal.value = true;
    // mappingId.value = await getMappingId({
    //   phone: phone,
    // });
  }

  // 生成词云函数
  function generateWordCloud(words) {
    d3.select('#wordcloud').html('');
    const layout = cloud()
      .size([360, 300])
      .words(words)
      .padding(5)
      .rotate(0) // 词云不旋转
      .font('Impact')
      .fontSize(function (d) {
        return d.size;
      })
      .on('end', draw);

    layout.start();

    function draw(words) {
      d3.select('#wordcloud')
        .append('svg')
        .attr('width', layout.size()[0])
        .attr('height', layout.size()[1])
        .append('g')
        .attr('transform', 'translate(' + layout.size()[0] / 2 + ',' + layout.size()[1] / 2 + ')')
        .selectAll('text')
        .data(words)
        .enter()
        .append('text')
        .style('font-size', function (d) {
          return d.size + 'px';
        })
        .style('font-family', 'Impact')
        .style('fill', function (d, i) {
          return d3.schemeCategory10[i % 10];
        })
        .attr('text-anchor', 'middle')
        .attr('transform', function (d) {
          return 'translate(' + [d.x, d.y] + ')rotate(' + d.rotate + ')';
        })
        .text(function (d) {
          return d.text;
        });
    }
  }
  // 打开添加模态框
  const addItem = () => {
    newItem.value = ''; // 清空输入框
    isEditMode.value = false;
    showModal.value = true;
  };

  // 打开修改模态框
  const editItem = () => {
    if (words.value.length === 0) {
      alert('没有可修改的词云内容！');
      return;
    }
    // 假设编辑第一个词云项
    currentEditIndex.value = 0;
    newItem.value = words.value[currentEditIndex.value].text;
    isEditMode.value = true;
    showModal.value = true;
  };

  // 提交添加或修改
  const submitItem = () => {
    if (isEditMode.value) {
      // 修改现有项
      words.value[currentEditIndex.value].text = newItem.value;
    } else {
      // 添加新项
      words.value.push({ text: newItem.value, size: 24 });
    }
    // 重新生成词云
    generateWordCloud(words.value);
    // 关闭模态框
    showModal.value = false;
  };

  // 取消编辑
  const cancelEdit = () => {
    showModal.value = false;
  };
  let isDetailedInfoVisible = ref(false);
  const checkDetailedInfo = () => {
    isDetailedInfoVisible.value = true;
  };
  let is3DInfoVisible = ref(false);
  const check3DInfo = () => {
    is3DInfoVisible.value = true;
  };
  let tabKey = ref('1');
  const bmidata = computed(() => {
    if (userInfo.value && userInfo.value.height && userInfo.value.weight) {
      const heightInMeters = userInfo.value.height / 100; // 将身高从厘米转换为米
      const bmi = userInfo.value.weight / (heightInMeters * heightInMeters);
      return bmi.toFixed(2); // 直接返回格式化后的字符串
    }
    return '---'; // 如果缺少必要的数据，则返回占位符
  });

  const dsMedicalRecord = [];
  const dsDailySign = [];
  const dsPhysicalExamination = [];
  interface OlderCaringServiceItem {
    agency_name: string;
    service_category: string;
    service_content: string;
    appointment_time: string;
    source?: string;
  }
  const dsOlderCaringService = ref<OlderCaringServiceItem[]>([]);
  const dsServiceRecommendation = [];
  const dsHealthAdvise = [];
  const dsHealthEvaluation = [];

  const columnsMedicalRecord = [
    {
      title: '就诊时间',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '就诊医院',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '就诊科室',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '诊断疾病',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '就诊类型',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '数据来源',
      dataIndex: 'name',
      key: 'name',
    },
  ];
  const columnsDailySign = [
    {
      title: '日期',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '测量时间',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '项目',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '值',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '数据来源',
      dataIndex: 'name',
      key: 'name',
    },
  ];
  const columnsPhysicalExamination = [
    {
      title: '体检日期',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '体检医院',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '体检项目',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '体检照片',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '数据来源',
      dataIndex: 'name',
      key: 'name',
    },
  ];
  // const columnsOlderCaringService = [
  //   {
  //     title: '日期',
  //     dataIndex: 'name',
  //     key: 'name',
  //   },
  //   {
  //     title: '购买服务',
  //     dataIndex: 'name',
  //     key: 'name',
  //   },
  //   {
  //     title: '购买方式',
  //     dataIndex: 'name',
  //     key: 'name',
  //   },
  //   {
  //     title: '服务提供机构',
  //     dataIndex: 'name',
  //     key: 'name',
  //   },
  //   {
  //     title: '到期时间',
  //     dataIndex: 'name',
  //     key: 'name',
  //   },
  //   {
  //     title: '数据来源',
  //     dataIndex: 'name',
  //     key: 'name',
  //   },
  // ];
  const columnsOlderCaringService = [
    {
      title: '日期',
      dataIndex: 'appointment_time',
      key: 'appointment_time',
    },
    {
      title: '服务类别',
      dataIndex: 'service_category',
      key: 'service_category',
    },
    {
      title: '服务名称',
      dataIndex: 'service_content',
      key: 'service_content',
    },
    {
      title: '服务提供机构',
      dataIndex: 'agency_name',
      key: 'agency_name',
    },
    {
      title: '数据来源',
      dataIndex: 'source', // 如果没有 source 字段可留空或补充
      key: 'source',
    },
  ];
  const columnsServiceRecommendations = [
    {
      title: '服务',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '服务商',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '规格',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '服务简介',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '推荐理由',
      dataIndex: 'name',
      key: 'name',
    },
    // {
    //   title: '操作',
    //   dataIndex: 'name',
    //   key: 'name',
    // },
  ];
  const columnsHealthAdvise = [
    {
      title: '日期',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '图标',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '标题',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'name',
      key: 'name',
    },
  ];
  const columnsHealthEvaluation = [
    {
      title: '日期',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '图标',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '标题',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'name',
      key: 'name',
    },
  ];
</script>
<style>
  .loading-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #1677ff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* 表头居中 */
  .ant-table-thead > tr > th {
    text-align: center !important;
    font-weight: 600;
    font-size: 16px;
    background: #f7f8fa;
  }

  /* 表格内容居中 */
  .ant-table-tbody > tr > td {
    text-align: center !important;
    font-size: 14px;
  }

  /* 斑马纹效果 */
  .ant-table-tbody > tr:nth-child(even) > td {
    background: #fafbfc;
  }
  .ant-table-tbody > tr:nth-child(ood) > td {
    background: #fff; /* 柔和的红色斑马纹 */
  }

  .modal_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
  }

  .modal-content_1 {
    background: #fff;
    padding: 36px 48px 32px 48px;
    border-radius: 16px;
    min-width: 480px;
    min-height: 420px;
    max-width: 90vw;
    max-height: 80vh;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
  }

  .modal-content_1 > span {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    display: block;
  }

  /* 下拉框样式优化 */
  /* .modal-content_1 .ant-select {
    margin-bottom: 24px;
    width: 240px !important;
    height: 60px !important;
    border: 1.5px solid #d4d8de !important;
    border-radius: 8px !important;
    background: #fafbfc;
    box-sizing: border-box;
    font-size: 25px;
    font-weight: 500;
    transition: border 0.2s;
  }
  .modal-content_1 .ant-select-selector {
    height: 44px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    align-items: center;
    display: flex;
    font-size: 25px;
    border: 2px solid #000;
  } */
  /* 全屏加载蒙层样式 */
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .loading-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
  }
  .modal-content_1 .ant-select,
  .modal-content_1 .ant-select-selector {
    height: 48px !important;
    font-size: 24px !important;
    display: flex;
    align-items: center;
    border: 80px solid #000;
  }

  .modal-content_1 .ant-select-selector {
    padding: 0 16px !important;
    border: 2px solid #000 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .modal-content_1 button.button-1 {
    height: 30px;
    line-height: 48px;
    padding: 0 32px;
    margin: 0;
    font-size: 12px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg, #1677ff 60%, #50aaff 100%);
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content_1 button.button-1:hover {
    background: linear-gradient(90deg, #409eff 60%, #1677ff 100%);
  }

  .modal-content_1 textarea {
    width: 95%;
    margin: 10px 0 0 0;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
    font-size: 15px;
    color: #333;
    background: #fafbfc;
    resize: vertical;
    min-height: 120px;
    max-height: 260px;
    box-sizing: border-box;
  }

  .popup {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(203, 202, 202, 0.7);
  }

  .popup > * {
    border-radius: 4px;
  }

  .popup-inner {
    position: relative;
    width: 90%;
    height: 90%;
    overflow-y: auto;
    border: 1px solid #006699;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 28px;
    background-color: #ffffff;
    /* display: flex;
      flex-direction: column; */
  }

  .popup-inner > .popup-close-button {
    box-sizing: content-box;
    position: absolute;
    right: 2px;
    top: 2px;
    /* padding-top: 1px; */
    padding-bottom: 1px;
    padding-left: 7px;
    padding-right: 7px;
    border-width: 1px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
    margin: 0;
    opacity: 60%;
    border-radius: 4px;
  }

  .popup-inner > .popup-close-button:hover {
    opacity: 100%;
  }

  .popup-inner > .popup-button-row {
    display: flex;
    justify-content: flex-end;
  }

  .popup-inner > .popup-button-row > .popup-cancel-button {
    margin-left: 2px;
  }

  .module_title {
    color: #009688;
    font-size: 22px;
  }
  .module_title .btn {
    font-size: 18px;
    color: #557bfa;
    cursor: pointer;
  }

  .hr-style {
    border-top: 1px solid #4caf50;
  }

  .item_title {
    font-size: 14px;
    margin-top: 15px;
    color: #000000;
  }

  .content-title {
    color: #009688;
    font-size: 18px;
    /* margin-bottom: 5px; */
    margin-top: 5px;
    margin-right: 20px;
  }

  .align-right {
    justify-content: flex-end;
  }

  .tip-style {
    line-height: 0;
    font-size: smaller;
    font-weight: bold;
  }

  /* :deep(.ant-card-head-title){
    background: yellowgreen;
  } */
  /* .ant-tabs-content-holder {
    height: 100%;
  }

  .ant-tabs-content {
    height: 100%;
  } */

  .popup_3d {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(203, 202, 202, 0.7);
  }

  .popup_3d > * {
    border-radius: 4px;
  }

  .popup-inner_3d {
    position: relative;
    width: 90%;
    height: 90%;
    overflow-y: auto;
    border: 1px solid #006699;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 28px;
    background-color: #ffffff;
    /* display: flex;
      flex-direction: column; */
    background-image: url('/resource/health/img/detail/详情-背景图.png');
    background-size: cover;
    background-position: center;
  }

  .popup-inner_3d > .popup-close-button_3d {
    box-sizing: content-box;
    position: absolute;
    right: 2px;
    top: 2px;
    /* padding-top: 1px; */
    padding-bottom: 1px;
    padding-left: 7px;
    padding-right: 7px;
    border-width: 1px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
    margin: 0;
    opacity: 60%;
    border-radius: 4px;
    background-image: url('/resource/health/img/关闭按钮.png');
    background-size: cover;
    background-position: center;
  }

  .popup-inner_3d > .popup-close-button_3d:hover {
    opacity: 100%;
  }

  .popup-inner_3d > .popup-button-row_3d {
    display: flex;
    justify-content: flex-end;
  }
  .popup-inner_3d > .popup-button-row_3d > .popup-cancel-button_3d {
    margin-left: 2px;
  }
  .modal {
    position: fixed;
    top: 40%;
    left: 5%;
    width: 25%;
    height: 15%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
  }

  input {
    padding: 10px;
    margin-right: 10px;
  }
  .button-1 {
    padding: 10px;
    margin-top: 10px;
  }
</style>
